<template>
  <div class="progress-demo">
    <h3 class="title">基本</h3>
    <div v-width="600">
      <p>
        <d-progress :percent="60">
          <span slot="title">项目1</span>
          <span slot="text">
            <span class="primary-color">180</span>K
          </span>
        </d-progress>
      </p>
      <p>
        <d-progress :percent="99" color="green">
          <span slot="title">项目2</span>
          <span slot="text">
            成功
          </span>
        </d-progress>
      </p>
      <p>
        <d-progress :percent="12" color="red">
          <span slot="title">项目2</span>
          <span slot="text">
            失败
          </span>
        </d-progress>
      </p>
    </div>
    <h3 class="title">动态</h3>
    <div v-width="600">
      <p>
        <d-number-input v-model="value" :step="10" :min="0" :max="200" useOperate></d-number-input>
      </p>
      <p>
        <d-progress :percent="value" :stroke-width="6">
          <span slot="title">项目1</span>
          <span slot="text">{{ value }}%</span>
        </d-progress>
      </p>
      <p>
        <d-progress :percent="value" :stroke-width="10" color="#ff5500"></d-progress>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'progressDemo',
  data () {
    return {
      value: 10
    }
  }
}
</script>

<style lang="stylus" scoped>
// .progress-demo
</style>
